<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频同步观看</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="container">
        <h1>视频同步观看</h1>
        
        <div class="room-section">
            <h2>房间信息</h2>
            <div id="room-info">已连接到共享观看房间</div>
        </div>
        
        <div class="video-section">
            <h2>视频播放</h2>
            <div class="video-container">
                <video id="video-player" controls></video>
            </div>
            
            <div class="upload-section">
                <input type="file" id="file-upload" accept="video/*">
                <button id="upload-btn">上传视频</button>
                <div id="upload-status"></div>
            </div>
            
            <div class="control-section">
                <button id="play-btn">播放</button>
                <button id="pause-btn">暂停</button>
                <div class="progress-container">
                    <input type="range" id="progress-bar" min="0" max="100" value="0" step="0.1">
                    <span id="time-display">00:00 / 00:00</span>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.socket.io/4.6.0/socket.io.min.js"></script>
    <script src="/static/js/app.js"></script>
</body>
</html>